@use "../../common.scss";

$input_height: 30px;

.search_box_container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;

  .search_box {
    display: flex;
    position: relative;
    flex: 1 1 auto;

    i.icon {
      display: flex;
      justify-content: center;
      align-items: center;
      color: common.$white;

      width: $input_height;
      height: $input_height;
      margin: 0;
    }

    i.search.icon {
      border-radius: 0;
      background-color: common.$blue;
    }

    i.spinner.icon {
      margin-left: -$input_height;
    }

    input {
      flex: 1 1 auto;
      height: $input_height;
      border-radius: 0;
      border: none;
      padding: 0 1em;

      color: common.$grey;
      outline: none;
      background-color: common.$background3;

      font-family: inherit;
      font-size: 16px;

      &::selection {
        background: rgba(common.$lightbg, 0.85);
      }

      &.disabled {
        opacity: 0.45;
      }
    }

    .ui.dropdown {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 12px;
      z-index: 10000;
      color: common.$white;
      background: common.$blue;

      .item,
      .text {
        color: common.$white !important;
      }
    }

    .search_box_loader {
      margin-left: -30px;
      width: 30px;
      height: 30px;
      padding: 0.3em;

      span {
        border-width: 3px;
      }
    }

    button.button.search_box_clear {
      height: 30px;
      padding: 0;
      margin-left: -33px;

      background: transparent;

      &:hover,
      &:focus,
      &:active {
        background: transparent !important;
      }
    }
  }
}
